<template>
	<view>
		<view class="swiper_bg" v-if="goods.main_image.length>0"> 
			<swiper class="swiper" circular :indicator-dots="banner.indicatorDots" :autoplay="banner.autoplay" :interval="banner.interval" :duration="banner.duration">
				<swiper-item v-for="(item,index) in goods.main_image" :key="index">
					<image class="banner" :src="item"></image>
				</swiper-item> 
			</swiper>
			<view style="width: 70rpx;height: 70rpx;float: left;margin-top: -470rpx;margin-left: 50rpx;border-radius: 60rpx;background-color: rgba(128, 128, 128, 0.5);z-index: inherit;position: fixed;">
				<image @click="back" src="/static/detail_back.png" style="width: 50rpx;height: 50rpx;margin-top: 10rpx;margin-left: 10rpx;" ></image>
			</view>
		</view>
	<view class="detail-info1">
		<view class="goods_00_1">
			{{goods.name}}
		</view>
		<view class="goods_00_2" > 
			<label style="margin-right: 20rpx;" v-if="goods.stock_num!=null">库存：{{goods.stock_num}}</label>
		</view>
		<view class="goods_00_2" style="margin-top: 10rpx;">
			<label style="border: #2AE8DC 3rpx solid;padding: 3rpx;border-radius: 10rpx;color: #2AE8DC;">您有<text v-if="goods.order_nums!=null">{{goods.order_nums}}</text><text v-if="goods.order_nums==null">0</text>位邻居已下单</label>
		</view>
		<view class="goods_00_2" style="margin-top: 10rpx;">
			<view v-for="(i,index) in 5" style="float: left;" :key="index">
				<image v-if="goods.score>=i" src="../../static/ic_xing@3x(1).png" style="width: 20rpx;height:20rpx;margin-left: 5rpx;"></image>
				<image v-if="goods.score>=i-0.5&&goods.score<i" src="../../static/ic_xing2@3x.png" style="width: 20rpx;height: 20rpx;margin-left: 5rpx;"></image>
				<image v-if="goods.score>i-1&&goods.score<i-0.5" src="../../static/ic_xing3@3x.png" style="width: 20rpx;height: 20rpx;margin-left: 5rpx;"></image>
			</view> 
			<label style="font-size: 22rpx;">{{goods.score}}分</label>
		</view> 
		<view class="goods_00_2" style="margin-top: 10rpx;">
			<view v-if="goods.is_book==1" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
				需要预约&nbsp;|&nbsp;交易保障
			</view>
			<view v-if="goods.is_book==0" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
				无需预约&nbsp;|&nbsp;交易保障
			</view>  
		</view>
		<view class="goods_00_3" v-if="goods.use_time!=null">
			营业时间：{{goods.use_time}}
		</view>
		<view class="goods_00_4">
			<label class="goods_00_p">￥{{goods.price}}</label>
			<label class="goods_00_p1">￥{{goods.origin_price}}</label>
			<label class="goods_00_p3">{{goods.zheKou}}</label>
		</view> 
		<view style="width: 100%;height: 10rpx;float: left;"></view>
	</view>
		<view class="menu_box">
			<view v-for="(item,index) in menu" :key="index">
				<view class="menu_se" v-if="item.id==menuIndex" @click="menuSelect(item)" >{{item.name}}</view>
				<view class="menu_def" v-if="item.id!=menuIndex" @click="menuSelect(item)" >{{item.name}}</view>
			</view>
		</view>
		<!-- 团购详情 -->
		<view v-if="menuIndex==1">
			<view class="detail-info1">
				<view class="goods_001">
					商户信息
				</view>
				<view class="goods_002">
					<image src="../../static/shop.png" class="detail-info1-item-img goods_002_1"></image>&nbsp;{{goods.shop_name}}
				</view>
				<view class="goods_003" @click="openMap">
					<image src="../../static/ic_dizhi.png" class="detail-info1-item-img goods_003_1" ></image>&nbsp;{{goods.position}}
				</view>
				<view class="goods_004" @click="openPhone">
					<image src="../../static/phone.png" class="detail-info1-item-img" style="float: left;margin-top: -2rpx;"></image>&nbsp;{{goods.phone}}
				</view> 
				<view class="goods_005">
					<map @click="openMap" style="width: 100%; height: 200rpx;float: left;" :latitude="goods.latitude" :longitude="goods.longitude" >
					</map>
				</view> 
			</view>
			<view class="detail-info1" style="font-size: 25rpx;">
				<view class="detail-info1-xq">
					 邻里团购
				</view>
				<view v-for="(item,index) in goods.deail_info" :key="index">
					<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}
					<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
					</view>
					<view class="detail-info1-xq-item" v-for="(item1,index1) in item.detail" :key="index1">
						<view class="xq-lable">{{item1.title}}</view>
						<view class="xq-content">{{item1.content}}</view>
					</view>
				</view>
				<view v-if="goods.concise!=null&&goods.concise!=''">
					<view class="detail-info1-xq-title">&nbsp;&nbsp;品牌简介
					<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
					</view>
					<view class="detail-info1-xq-item" >
						{{goods.concise}}
					</view>
				</view>
				<view v-if="goods.advantage!=null&&goods.advantage!=''">
					<view class="detail-info1-xq-title">&nbsp;&nbsp;服务优势
					<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
					</view>
					<view class="detail-info1-xq-item" >
						{{goods.advantage}}
					</view>
				</view>
				<view class="detail-info1-xq-title">&nbsp;&nbsp;宣传文案
				<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
				</view>
				<view class="detail-info1-xq-item" >
					{{goods.sell_info}}
				</view>
				
				<view class="detail-info1-xq">
					 宝贝展示
				</view>
				<view style="width: 100%;height: 10rpx;float: left;"></view>
				<image v-for="(item,index) in goods.detail_img" :key="index" :src="item" mode="widthFix" style="width: 100%;"></image> 
				<view class="detail-info1-xq" style="height: 60rpx;line-height: 60rpx;font-size: 38rpx;text-align: left;">
					<label style="float: left;">购买须知</label> <image src="../../static/laba.png" style="width: 50rpx;height: 50rpx;margin-left: 12rpx;float: left;margin-top: 5rpx;"></image>
				</view>
				<view v-for="(item,index) in goods.buy_notice" :key="index">
					<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image></view>
					<view class="detail-info1-xq-item" v-for="(item1,index1) in item.detail" :key="index1"> 
						<view  style="width: 100%;">{{item1.content}}</view>
					</view>
				</view> 
				<view style="width: 100%;height: 20rpx;float: left;"></view>
			</view> 
			<view style="width: 100%;height: 150rpx;float: left;"></view>
		</view>
		<view v-if="menuIndex==2">
			<view class="goods_pl_1">
				<view class="goods_pl_2">
					用户名<label class="goods_pl_21">2024年6月19日11:13:18</label>
				</view>
				<view class="goods_pl_3">
					评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容评论的内容。
				</view>
				<view class="goods_pl_4"> 
					<image src="../../static/hd1.png" class="goods_pl_41"></image>
					<image src="../../static/hd1.png" class="goods_pl_41"></image>
					<image src="../../static/hd1.png" class="goods_pl_41"></image>
					<image src="../../static/hd1.png" class="goods_pl_41"></image>
					<image src="../../static/hd1.png" class="goods_pl_41"></image> 
				</view>
			</view>
			<view style="width: 100%;height: 150rpx;float: left;"></view>
		</view>
		<view v-if="goods.status==0" style="position: fixed;bottom: 0rpx;left:0rpx;height: 130rpx;width: 100%;background: white;">
			<view @click="edit(2)" class="detail-buy">
				不通过
			</view>
			<view @click="edit(1)" class="detail-buy">
				通过
			</view> 
		</view>
		<view v-if="goods.status==1" style="position: fixed;bottom: 0rpx;left:0rpx;height: 130rpx;width: 100%;background: white;"> 
			<view  @click="edit(2)" class="detail-buy">
				不通过
			</view>
		</view>
		 <view v-if="goods.status==2" style="position: fixed;bottom: 0rpx;left:0rpx;height: 130rpx;width: 100%;background: white;"> 
		 	<view  @click="edit(1)" class="detail-buy">
		 		通过
		 	</view>
		 </view> 
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../../utils/http';
	import {ref} from 'vue'; 
	const goodsId=ref();
	const id=ref();
	const userId=ref();
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	onLoad((query) => {
		goodsId.value=query.goodsId;
		console.log(goodsId.value);
		id.value=query.id;
		userId.value=getApp().globalData.user.userId;
		initData();
	})
	function initData(){
		uni.showLoading({
			title: '数据加载中',
			mask:true
		});  
		http.request({
		 	url: "/goods/detail",
		 	method: "POST",
		 	data: {
		 		"id":goodsId.value,
		 	}
		}).then((responseData) => { 
			uni.hideLoading();
			if(responseData.code==1){
				responseData.data.deail_info=JSON.parse(responseData.data.deail_info);
				responseData.data.detail_img=JSON.parse(responseData.data.detail_img);
				responseData.data.main_image=JSON.parse(responseData.data.main_image);
				responseData.data.buy_notice=JSON.parse(responseData.data.buy_notice); 
				console.log(responseData);
				responseData.data.zheKou=calculateDiscount(responseData.data.origin_price,responseData.data.price);
				goods.value=responseData.data; 
			}else{
				uni.showToast({
					icon: 'error',
					title: '数据异常'
				})
			}
		}).catch((err) => {
			uni.hideLoading();
		 	uni.showToast({
		 		icon: 'error',
		 		title: '请求失败'
		 	})
		})
	}
	function edit(status){
		var msg="确定通过？";
		if(status!=1){
			msg="确定不通过？"
		}
		uni.showModal({
		    title: '提示',
		    content: msg,
		    success: (res) => {
		        if (res.confirm) {
		            // 用户点击了确定按钮 
					uni.showLoading({
						title: '数据加载中',
						mask:true
					});  
					http.request({
					 	url: "/x/partner/goods/edit",
					 	method: "POST",
					 	data: {
							id:id.value,
							userId:userId.value,
							status:status,
							goodsId:goodsId.value 
						}
					}).then((responseData) => { 
						uni.hideLoading();
						console.log(responseData)
						if(responseData.code==1){ 
							initData();  
							uni.showToast({
								icon: 'error',
								title: '成功'
							})  
						}else if(responseData.code==0){
							uni.showToast({
								icon: 'error',
								title: responseData.message
							})
						}else if(responseData.code==-1){
							uni.navigateTo({
								url: "/pages/login/login"
							});
						}
					}).catch((err) => {
						uni.hideLoading();
					 	uni.showToast({
					 		icon: 'error',
					 		title: '请求失败'
					 	})
					}) 
		        } else if (res.cancel) {
		            // 用户点击了取消按钮
		            console.log('用户取消了授权');
		        }
		    }
		});
		
	}  
	function back(){ 
	    const pageSize= getCurrentPages().nv_length;
		if(pageSize==1){
			wx.switchTab({
			  url: "/pages/home/home",
			  success: function(res) {
			    // 跳转成功
			  },
			  fail: function(err) {
			    // 错误处理
			  }
			})
			return;
		}
		const pages = getCurrentPages();
		const beforePage = pages[pages.length - 2];
		console.log(beforePage)
		if(beforePage){
			beforePage.$vm.$.exposed.pageIn(goods.value) 
			uni.navigateBack(); 
		} 
	}
	function openMap(){
		console.log("111111"); 
		uni.openLocation({
		    latitude:goods.value.latitude,
		    longitude: goods.value.longitude,
		    name: goods.value.address_name,
		    address: goods.value.position,
		    success: function (res) {
		        console.log('打开系统位置地图成功')
		    },
		    fail: function (error) {
		        console.log(error)
		    }
		}) 
	}
	
	function openPhone(){
		uni.makePhoneCall({ 
		      phoneNumber:goods.value.phone, // 电话号码
		      success: function () {
		        console.log('拨号成功');
		      },
		      fail: function () {
		        console.log('拨号失败');
		      }
		});
	}
	function calculateDiscount(originalPrice, discountPrice) {
	  if (discountPrice === 0 || originalPrice === 0) {
	    return 0; // 无折扣或原价为0时，返回0
	  }
	  const zheKou=(discountPrice / originalPrice) * 10; 
	  const length=zheKou.toString().length;
	  if(length>4){
		return zheKou.toFixed(2)+"折";
	  }
	  return zheKou+"折"; // 计算折扣力度并返回
	}
	const menuIndex=ref(1);
	const menu=ref([
		{
			id:1,
			name:'团购详情'
		}
	]);
	 
	 
	function menuSelect(item){
		menuIndex.value=item.id;
	}
	 
	const banner=ref({
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500
	});
	const goods=ref({
		main_image:[]
	}); 
</script>

<style>
	@import "../../activity/detail.scss"; 
	.goods_pl_41{
		width: 120rpx;height: 120rpx;float: left;margin-left: 10rpx;
	}
	.goods_pl_4{
		width: 94%;margin-left: 3%;float: left;height: auto;margin-bottom: 20rpx;margin-top: 10rpx;
	}
	.goods_pl_3{
		width: 94%;margin-left: 3%;float: left;height: auto;
	}
	.goods_pl_21{
		float: right;color: #cccccc;font-size: 22rpx;
	}
	.goods_pl_2{
		width: 94%;margin-left: 3%;float: left;height: 50rpx;line-height: 50rpx
	}
	.goods_pl_1{
		width: 94%;float: left;height:auto;margin-left: 3%;border-radius: 24rpx;background-color: white;margin-top: 20rpx;padding-top: 20rpx;
	}
	.goods_005{
		width: 84%;height: 220rpx;float: left;margin-left: 8%;color:#545454;font-size: 22rpx;margin-top: 20rpx;font-size: 25rpx;
	}
	.goods_004{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 25rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_00_p3{
		width: auto;border: red 3rpx solid;margin-left: 20rpx;padding-left: 10rpx;padding-right: 10rpx;padding-top: 2rpx;padding-bottom: 2rpx; border-radius: 15rpx;color: red;
	}
	.goods_00_p1{
		color: #cccccc;text-decoration: line-through
	}
	.goods_00_p{
		color: red;font-size: 34rpx;margin-right: 20rpx;
	}
	.goods_00_4{
		width: 94%;height: auto;float: left;margin-left: 3%;line-height: 25rpx;font-size: 22rpx;line-height: 50rpx;color: #cccccc;
	}
	.goods_00_3{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;margin-top: 10rpx;
	}
	.goods_00_2{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;
	}
	.goods_00_1{
		width: 94%;height: 60rpx;float: left;margin-left: 3%;line-height: 60rpx;
	}
	.menu_box{
		height:70rpx;background: white;width: 94%;margin-left: 3%;border-radius: 20rpx;float: left;margin-top: 20rpx;line-height: 70rpx;
	}
	.menu_se{
		width: auto;margin-left:3%;color: #2AE8DC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.menu_def{
		width: auto;margin-left:3%;color: #CCCCCC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.goods_001{
		width: 90%;height: 35rpx;float: left;margin-left: 5%;line-height: 35rpx;color:#545454;font-size: 22rpx;margin-top: 20rpx;font-size: 30rpx;text-align: center;
	}
	.goods_002{
		width: 84%;line-height: 30rpx;float: left;margin-left: 8%;line-height: 35rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 28rpx;
	}
	.goods_003{
		width: 84%;line-height: 30rpx;float: left;margin-left: 8%;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 28rpx;
	}
	.goods_002_1{
		float: left;margin-top: -2rpx;
	}
	.goods_003_1{
		float: left;margin-top: -2rpx;
	}
</style>